import React from 'react';
import styles from '@/assets/css/user.module.css';
import Tabbar from '@/components/Tabbar';
import type business from '@/types/business';

export default function Index()
{
    const OnLogout = () =>
    {
        React.confirm({
            title:'退出账号',
            content: '是否退出当前账号？',
            onConfirm:() =>
            {
                React.success('退出当前账号成功',() =>
                {
                    React.Cookies.remove('business',{path:'/'});

                    React.business = {} as business;

                    React.navigate('/business/login');
                });
            }
        })
    }

    const Email = () =>
    {
        if(React.business.auth == '1')
        {
            return (
                <></>
            )
        }else{
            return (
                <>
                    <div className={styles.item}>
                        <NavLink to="/business/email" >
                            <div className={styles.title}>邮箱认证</div>
                            <div className={styles.icon}>
                                <img src='/assets/images/right.png' alt="" />
                            </div>
                        </NavLink>
                    </div>
                </>
            )
        }
    }

    return (
        <>
            <div className={styles.header}>
                <div className={styles.userinfo}>
                    <div className={styles.avatar}>
                        <img src={ React.business.avatar_cdn } alt="" />
                    </div>
                    <div className={styles.nickname}>{ React.business.nickname }</div>
                </div>
                <div className={styles.corrugated}>
                    <div className={`${styles.wave_top} ${styles.wave_item}`}></div>
                    <div className={`${styles.wave_middle} ${styles.wave_item}`}></div>
                </div>
            </div>
            
            <div className={styles.menu_cell}>
                <div className={styles.item}>
                    <NavLink to="/business/profile" >
                        <div className={styles.title}>个人资料</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </NavLink>
                </div>

                {/* 邮箱认证 */}
                <Email />

                <div className={styles.item}>
                    <NavLink to="/guest" >
                        <div className={styles.title}>住客信息</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/order" >
                        <div className={styles.title}>房间订单</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/business/coupon" >
                        <div className={styles.title}>我的优惠券</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/business/about" >
                        <div className={styles.title}>关于我们</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item} onClick={OnLogout}>
                    <a>
                        <div className={styles.title}>退出账号</div>
                        <div className={styles.icon}>
                            <img src='/assets/images/right.png' alt="" />
                        </div>
                    </a>
                </div>
            </div>

            {/* 底部 */}
            <div className={styles.footer}>
                <Tabbar />
            </div>
        </>
    )
}